<%--
  Created by IntelliJ IDEA.
  User: waqwb
  Date: 2021/12/16
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <title>当当图书 – 全球最大的中文网上书店</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <c:set var="ctx" value="${pageContext.request.contextPath }"></c:set> <!-- 定义变量 -->
    <link href="${ctx}/css/book.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/second.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/secBook_Show.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/list.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/book_head090107.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/public_footer.css" rel="stylesheet" type="text/css"/>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="${ctx }/js/jquery-3.5.0.min.js"></script>
</head>

<body>

<div style="width: 962px; margin: auto;">
    <a href="#"><img src="${ctx}/images/default/book_banner_081203.jpg" border="0"/> </a>
</div>
<!-- 头部开始 -->
<div class="head_container">
    <div class="head_welcome">
        <div class="head_welcome_right">
            <!-- if-if else-else -->
            <c:choose>
                <c:when test="${!empty user }"> <!-- pageContext、request、session、application -->
                    <span class="head_welcome_text">欢迎：${user.nickname }</span>
                </c:when>
                <c:otherwise>
						<span class="head_welcome_text"> <span class="little_n">
							| <a href="${ctx}/login.jsp" class="head_black12a">登录</a> |
							<a href="${ctx}/register.jsp" class="head_black12a" target="_blank">注册</a> | </span>
						</span>
                </c:otherwise>
            </c:choose>
            <div class="cart gray4012">
                <a href="${ctx}/cart.jsp">购物车</a>
            </div>
        </div>
    </div>
    <div class="head_head_list">
        <div class="head_head_list_left">
				<span class="head_logo"><a href="#" name="backtobook"><img
                        src="${ctx}/images/booksaleimg/book_logo.gif"/>
					</a> </span>
        </div>
        <div class="head_head_list_right">

            <div class="head_head_list_right_b">
            </div>
        </div>
    </div>
</div>
<!-- 头部结束 -->

<div class="book">

    <!--左栏开始-->
    <div id="left" class="book_left">
    </div>
    <!--左栏结束-->

    <!--中栏开始-->
    <div class="book_center">

        <!--图书列表开始-->
        <div id="divRight" class="list_right">

            <div id="book_list" class="list_r_title">
                <div>
                    您现在的位置:&nbsp;
                    <a href="#" style="font-size: 12pt;font-family: sans-serif;color: white">图书热卖场</a>
                </div>
            </div>

            <!--商品条目开始-->
            <div class="list_r_line"></div>
            <div class="clear"></div>
            <!-- 循环 -->
            <c:forEach items="${bookList}" var="book">
                <div class="list_r_list">
					<span class="list_r_list_book">
                        <a name="link_prd_img" href='#'>
                            <img title="${book.productName }" class="dang_img"
                                 src='${ctx}/productImages/${book.productPic}'/>
                        </a>
                    </span>
                    <h2>
                        <a name="link_prd_name" href='#'>${book.productName}</a>
                    </h2>
                    <h3>
                        顾客评分：${book.score}
                    </h3>
                    <h4 class="list_r_list_h4">
                        作 者:
                        <a href='#' name='作者'>${book.author}</a>
                    </h4>
                    <h4>
                        出版社：
                        <a href='#' name='出版社'>${book.publishing }</a>
                    </h4>
                    <h4>
                        出版日期：${book.publishTime }
                    </h4>
                    <h5>
                            ${book.description }
                    </h5>
                    <div class="clear"></div>
                    <h6>
                        <span class="del">定价￥${book.fixedPrice }</span>
                        <span class="red">&nbsp;&nbsp;&nbsp;当当价￥${book.dangPrice }</span>
                        &nbsp;&nbsp;&nbsp;节省：￥${book.fixedPrice - book.dangPrice }
                    </h6>
                    <span class="list_r_list_button">
						<img align="top" src='${ctx}/images/buttom_goumai.gif'
                             onclick="buy(${book.id})"/>
					</span>
                    <span id="cartInfo_1"></span>
                </div>
            </c:forEach>
            <div class="clear"></div>
            <!--商品条目结束-->

            <div class="clear"></div>
            <div id="divBottomPageNavi" class="fanye_bottom">
            </div>

        </div>
        <!--图书列表结束-->

    </div>
    <!--中栏结束-->
    <div class="clear"></div>
</div>

<!--页尾开始 -->

<div class="public_footer">
    <div class="public_footer_bottom">
        <div class="public_footer_icp" style="line-height: 48px;">
            Copyright (C) 当当网 2004-2008, All Rights Reserved
            <a href="#" target="_blank"><img src="${ctx}/images/bottom/validate.gif" border="0" align="middle"/>
            </a>
            <a href="#" target="_blank" style="color: #666;">京ICP证041189号</a>
        </div>
    </div>
</div>
<!--页尾结束 -->
<script type="text/javascript">
    // 购买事件
    function buy(bookId) {
        // 1.需要获取购买书籍的id
        // 2.发送ajax添加到购物车
        // post和get的区别：
        //1.post传递参数是隐藏的，get传递参数是拼接到url上的
        //2.get传递参数是有大小限制的，post请求没有
        //3.servelt在接收请求时：get请求使用doGet来接收，post请求使用doPost来接收
        $.ajax({
            url: "${ctx}/buyBook",
            type: "post",
            data: {"bookId": bookId},
            success: function (result) {
                alert(result);
            }
        });

    }
</script>
</body>

</html>
